<template>
  <el-card>
    <el-form :inline="true" :model="formInline" class="formBox">
      <el-form-item label="姓名">
        <el-input v-model="formInline.user" placeholder="请输入员工姓名" />
      </el-form-item>
      <el-form-item label="员工职位">
        <el-select v-model="formInline.region" placeholder="请选择员工职位">
          <el-option label="保安" value="保安" />
          <el-option label="维修员" value="维修员" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { reactive } from "vue";

const formInline = reactive({
  user: "",
  region: ""
});

const query = () => {
  console.log("submit!");
};
</script>

<style scoped>
.formBox {
  padding-top: 1rem;
  padding-left: 2rem;
}
</style>
